<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分析生命周期</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 
    生命周期：
      1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
      2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
      3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
      4.生命周期函数中的this指向是vm或组件实例对象。
  -->
  <!-- 准备好一个容器 -->
  <div id="root" :x="n">
    <h2 v-text="n"></h2>
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁</button>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false;   // 阻止vue 在启动时生成生产提示

  new Vue({
    el: "#root",
    data: {
      n: 1
    },
    // 模板会把root节点替换掉
    /* template: `
      <div>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
      </div>
    `, */
    methods: {
      add() {
        console.log("add");
        this.n++
      },
      bye() {
        console.log("bye");
        // 完全销毁一个实例，清理它与其他实例的连接，解绑它的全部指令及事件（自定义事件不是原生DOM事件）监听器
        this.$destroy();
      }
    },

    // 数据代理还未开始  无法访问到data中的数据，methods中的方法
    beforeCreate() {
      console.log('beforeCreate');
      console.log(this);
      debugger;
    },

    // 数据监测 数据代理开始  可以访问到data中的数据，methods中的方法
    created() {
      console.log('create');
      /* console.log(this);
      debugger; */
    },
    
    /*
      页面呈现的是未经Vue编译的DOM结构，
      所有对DOM的操作，最终都不奏效
      因为mounted事件会重新渲染Vue编译的DOM
    */ 
    beforeMount() {
      console.log('beforeMount');
      /* console.log(this);
      debugger; */
    },

    /*
      页面呈现的是经过Vue编译的DOM结构，
      所有对DOM的操作，均有效（不建议）
      初始化过程结束
      开启定时器 发送网络请求 订阅消息 绑定自定义事件
    */
    mounted() {
      console.log('mounted');
      /* console.log(this.$el);
      debugger; */
    },

    /*
      数据是新的，但页面是旧的
      页面尚未和数据保持同步
    */ 
    beforeUpdate() {
      console.log('beforeUpdate');
      /* console.log(this.n);  // n为2  但是页面尚未更新值
      debugger; */
    },

    /*
      数据是新的，页面也是新的
      即：页面和数据保持同步
    */
    updated() {
      console.log('updated');
      /* console.log(this.n);
      debugger; */
    },

    /*
      vm中的所有data、methods、指令等等，都处在可用状态
      马上要被执行销毁过程
      一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作
      函数即使调用 但是数据也不会更新

      原生的事件还会留下，
      但是页面不在编译刷新了
      并且自定义事件会被解绑
    */ 
    beforeDestroy() {
      console.log('beforeDestroy');
      /* console.log(this.n)
      debugger; */
    },

    /*
      极少用到
      react里面没有这个钩子函数
    */
    destroyed() {
      console.log('destroy');
      /* console.log(this.n)
      debugger; */
    },

    watch: {
      n() {
        console.log("n改变了")
      }
    }
  });

</script>

</html>